<template>
  <div class="component">
    <div class="container-center">
      <div class="over-hidden">
        <router-link
          class="btn btn-default pull-right icon icon-arrowsleftline mt-lg"
          :to="getMicroRoute('/tools')"
        >
          返回列表</router-link>
        <h2 class="text-left">图标示例生成</h2>
      </div>
      <div class="row">
        <div class="col-xs-6 row-cell">
          <div class="form-group">
            <label class="form-label">输入文本：</label>
            <div class="form-field">
              <textarea class="form-textarea json-input" rows="4" v-model="inputData"></textarea>
            </div>
          </div>
          <div class="form-group">
            <label class="form-label">图标样式文件：</label>
            <div class="form-field">
              <input
                @change="handleChangeFile" class="form-input" type="file"
                accept="text/css,text/less,text/scss,text/sass" />
            </div>
          </div>
        </div>
        <div class="col-xs-6 row-cell">
          <div class="form-group">
            <label class="form-label">输出文本：</label>
            <div class="form-field">
              <textarea class="form-textarea json-input" rows="4" v-model="outputData"></textarea>
            </div>
          </div>
        </div>
        <div class="row-cell clear pt-sm mb-sm">
          <div class="pull-left">
            <a class="btn btn-theme mr-md" @click="toBuild">生成</a>
            <a class="btn btn-success" @click="toDownload">下载</a>
          </div>
          <div class="pull-right">
            <span class="form-inline">
              <SwitchRich v-model="isPipe" label="覆盖输入" />
            </span>
            <Pipe name="base64" :operation="{inputData: outputData}" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SwitchRich from '@/components/vue/components/switch-rich/2.0/switch-rich.vue'
import '@vendor//base64/1.0.0/base64.min.js'
import { filer } from '@daelui/dogjs/dist/components'
import Pipe from '../index/pipe.vue'

export default {
  components: {
    SwitchRich,
    Pipe
  },

  data () {
    return {
      inputData: '',
      outputData: '',
      isPipe: false
    }
  },

  methods: {
    /**
     * @function 生成
    */
    toBuild () {
      let inputData = this.inputData
      let icons = []
      inputData.split('\n').forEach(item => {
        let reg = /\.(.+):before/
        let res = reg.exec(item)
        if (res) {
          icons.push(res[1])
        }
      })
      icons = icons.map(item => {
        return `<div class="row-col" title="${item}"><div><i class="iconfont ${item}"></i></div><div class="col-text">${item}</div></div>`
      })
      this.outputData = `<!DOCTYPE html>
        <html>
          <head>
            <meta charset="utf-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta name="viewport" content="width=device-width,initial-scale=1.0" />
            <link rel="stylesheet" href="./iconfont.css" />
            <title>图标示例</title>
          </head>
          <body>
            <h2 class="row-title">图标示例</h2>
            <div class="row-container">
            ${icons.join('\n')}
            </div>
            <style type="text/css">
            .row-title{text-align:center;}
            .row-container{overflow:auto;margin:12px auto;max-width: 1400px;}
            .row-col{float:left;margin:8px;padding:12px;width:190px;border:1px solid #ccc;text-align:center;}
            .row-col i{font-size: 28px}
            .col-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
            </style>
          </body>
        </html>`
      // 是否管道操作
      if (this.isPipe === true) {
        this.inputData = this.outputData
      }
    },

    /**
     * @function 下载
    */
    toDownload () {
      filer.downloadFile('icon-demo.html', this.outputData)
      // 是否管道操作
      if (this.isPipe === true) {
        this.inputData = this.outputData
      }
    },

    handleChangeFile (e) {
      let file = e.target.files[0]
      filer.readFileText(file).then(result => {
        this.inputData = result
        this.toBuild()
        // 是否管道操作
        if (this.isPipe === true) {
          this.inputData = this.outputData
        }
      })
    }
  },

  mounted () {
    // 管道数据
    if (this.$store.state.inputData) {
      this.inputData = this.$store.state.inputData
      this.$store.state.inputData = ''
    }
  }
}
</script>

<style lang="less">

</style>
